<template>
    <div>
        <label class="qf_check">
            <span class="qf_check__input" :class="{'is-checked':checkedBool,'is-disabled':disabled,'is-indeterminate':indeterminate}">
                <input class="qf_check__original" type="checkbox" v-model="checkedBool" :disabled="disabled"
                    @change="checkFun">
                <span class="qf_check__inner"></span>
            </span>
        </label>
    </div>
</template>
<script setup lang="ts" name="qfCheckbox">
 
  import { ref, reactive ,computed,watch} from "vue";
    const props = defineProps({
        //是否选中
        isChecked: {
            type: Boolean,
            default: false
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        //半选状态
        indeterminate:{
            type: Boolean,
            default: false
        }
    })
    const checkedBool=ref(false);
    watch(()=>props.isChecked,(newValue,oldValue)=>{
        checkedBool.value=newValue;
    })

    // const checkedBool=computed(()=>{
    //     return props.isChecked
    // })

    // emit
    const emit = defineEmits < {
        change: [value: any];
    } > ();
    const checkFun = (e) => {
        emit("change", e); 
    }

</script>
<style lang="scss" scoped>
    @import url(./index.scss);
</style>